<template>
  <div class="my_index">
    <div
      v-if="!userInfo.enterpriseName"
      :class="userInfo.enterpriseName ? '' : 'pop'"
    >
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <div class="bacggroud_wraper">
      <section class="con">
        <div class="header">
          <div class="avatar">
            <img
              :src="userInfo.blogProfilePhoto"
              alt=""
              v-if="!!userInfo.blogProfilePhoto"
            />
            <div size="1rem" class="userAvatar" v-else />
          </div>
        </div>
        <div class="right">
          <div class="station">
            {{ userInfo.enterpriseName }}
          </div>
          <div class="right_up">
            <div class="right_down">NO.{{ userInfo.memberCode }}</div>

            <div class="grade">
              <!-- 1-普卡   2-银卡   3-金卡   4-钻卡   5-黑卡   -->
              <img
                v-if="userInfo.gradeCode === '1'"
                src="~static/fuel/new/userlevel_pu.png"
                alt="用户级别"
              />
              <img
                v-if="userInfo.gradeCode === '2'"
                src="~static/fuel/new/userlevel_yin.png"
                alt="用户级别"
              />
              <img
                v-if="userInfo.gradeCode === '3'"
                src="~static/fuel/new/userlevel_jin.png"
                alt="用户级别"
              />
              <img
                v-if="userInfo.gradeCode === '4'"
                src="~static/fuel/new/userlevel_zhuan.png"
                alt="用户级别"
              />
              <img
                v-if="userInfo.gradeCode === '5'"
                src="~static/fuel/new/userlevel_black.png"
                alt="用户级别"
              />
              <img
                v-if="userInfo.gradeCode === 's'"
                src="~static/fuel/new/userlevel_svip.png"
                alt="用户级别"
              />

              <span v-if="false">{{ userInfo.gradeName }}</span>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="vip-center">
      <router-link
        :to="'/' + enterpriseId + '/point'"
        class="integral_container"
      >
        <div class="value">{{ userInfo.integral }}</div>
        <div class="integral">
          积分
          <!-- <van-icon name="arrow" /> -->
        </div>
      </router-link>
      <router-link :to="'/' + enterpriseId + '/charge/amount'" class="go_remit">
        <div class="amount">
          ￥<b>{{ userInfo.balance }}</b>
        </div>
        <div class="text">卡余额</div>
      </router-link>
      <div class="scan_container">
        <div class="scan" @click="scanShow = true"></div>
        <div class="text">会员码</div>
      </div>
      <!-- <router-link
        :to="'/' + enterpriseId + '/coupon'"
        class="integral_container"
      >
        <div class="integral">
          优惠劵：<span class="value">{{ userInfo.couponCount }}</span>
          <van-icon name="arrow" />
        </div>
      </router-link> -->
    </div>
    <header class="top" @click="goRight()">
      <header class="vip">
        <img v-if="userInfo.gradeCode === '1'" src="~static/my/pk.png" alt="" />
        <img v-if="userInfo.gradeCode === '2'" src="~static/my/yk.png" alt="" />
        <img v-if="userInfo.gradeCode === '3'" src="~static/my/jk.png" alt="" />
        <img v-if="userInfo.gradeCode === '4'" src="~static/my/zk.png" alt="" />
        <img v-if="userInfo.gradeCode === '5'" src="~static/my/hk.png" alt="" />
        <img
          v-if="userInfo.gradeCode === 's'"
          src="~static/my/svip.png"
          alt=""
        />
        <div class="vip2">
          <div class="growth">
            <div class="wrapper">
              <div class="icon"></div>
              <span class="text1">{{ formattedUserType }}用户</span>
            </div>
            <div class="text2">
              <span v-if="userInfo.gradeCode === '5'">
                您已到达最高会员等级，可开通超级会员享受
              </span>
              <span v-else-if="userInfo.gradeCode === 's'">
                您已是尊贵的超级会员！
              </span>
              <span v-else>
                距离下一等级{{ formatterNextUser }}还需{{
                  userInfo.missValue
                }}成长值
              </span>
            </div>
          </div>
          <div class="rights">会员权益</div>
        </div>
      </header>
    </header>
    <div style="height: 1px" class="hezitaxian"></div>
    <footer class="bottom">
      <div class="cont">
        <!-- 功能菜单列表 -->
        <div
          v-for="(item, index) in functionList"
          :key="index"
          :class="item.name == '充值订单' ? 'subItem' : 'item'"
        >
          <router-link
            v-if="
              item.pageUrl &&
              (item.name != '小AI加油' || item.name != '快捷加油')
            "
            :to="item.pageUrl"
            tag="div"
          >
            <div v-if="item.name === '会员卡'" class="icon vip"></div>
            <!-- <div v-if="item.name === '我的订单'" class="icon charge"></div> -->
            <div v-if="item.name === '充值订单'" class="icon charge"></div>
            <div v-if="item.name === '优惠券'" class="icon consume"></div>
            <div v-if="item.name === '超级会员'" class="icon svip"></div>
            <div v-if="item.name === '今日油价'" class="icon remit"></div>
            <!-- <div v-if="item.name === '推荐有奖'" class="icon recommend"></div> -->
            <div v-if="item.name === '支付设置'" class="icon pay"></div>
            <!-- <div v-if="item.name === '油站导航'" class="icon fuel"></div> -->
            <div v-if="item.name === '我的车队'" class="icon teamcard"></div>
            <div v-if="item.name == '渠道认证'" class="icon authen"></div>
            <div v-if="item.name === '我的爱车'" class="icon car"></div>
            <div v-if="item.name === '秒杀'" class="icon miaosha"></div>
            <!-- <div v-if="item.name === '客服咨询'" class="icon serviceTel"></div> -->
            <div
              class="text"
              v-if="
                !(
                  item.name == '我的订单' ||
                  item.name == '油站导航' ||
                  item.name == '推荐有奖'
                )
              "
            >
              {{ item.name }}
            </div>
          </router-link>
          <div v-if="item.name === '我的订单'" @click="goAuthOrder()">
            <div class="icon charge"></div>
            <div class="text">我的订单</div>
          </div>
          <div v-if="item.name === '油站导航'" @click="goAuthStation">
            <div class="icon fuel"></div>
            <div class="text">油站导航</div>
          </div>
          <div v-if="item.name === '推荐有奖'" @click="goRecommend">
            <div class="icon recommend"></div>
            <div class="text">推荐有奖</div>
          </div>
          <div v-if="item.name === '渠道认证'" @click="goAuthen()">
            <div class="icon authen"></div>
            <div class="text">渠道认证</div>
          </div>
          <div v-if="item.name === '小AI加油'" @click="goAI()">
            <div class="icon AI"></div>
            <div class="text">小AI加油</div>
          </div>
          <div v-if="item.name === '快捷加油'" @click="goFuelOrRemit()">
            <div class="icon fueling"></div>
            <div class="text">快捷加油</div>
          </div>
          <div v-if="item.name === '客服咨询'">
            <div class="icon serviceTel" @click="serviceTelEvent"></div>
            <div class="text">客服咨询</div>
          </div>
        </div>
      </div>
    </footer>

    <van-overlay :show="scanShow" @click.stop="scanShow = false">
      <div class="scan_wrapper">
        <div class="block">
          <div class="title">会员码</div>
          <qr
            :text="userInfo.memberCode"
            @downloadImg="downloadImg"
            name="二维码"
            class="qr"
          >
            <div style="text-align: center">用于识别会员身份，参与站内活动</div>
          </qr>
        </div>
      </div>
    </van-overlay>

    <!-- 客服弹框 -->
    <van-popup
      round
      v-model="serviceTelShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="phoneContent">
        <div class="phone">服务联系电话</div>
        <div class="phoneCode" @click="phoneUrlEvent(phoneCode)">
          {{ phoneCode }}
        </div>
        <div class="cancel" @click="serviceTelShow = false">取消</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import Qr from "@/components/QrCode";
import Vue from "vue";
import { Overlay, Icon, Dialog, Toast, Popup } from "vant";
import { userInfo } from "os";
Vue.use(Overlay);
Vue.use(Icon);
Vue.use(Dialog);
Vue.use(Toast);
Vue.use(Popup);
export default {
  head() {
    return {
      title: "会员中心",
    };
  },
  data() {
    return {
      showGoApplet: true,
      infoData: {},
      scanShow: false,
      stationId: null,
      functionList: [],
      serviceTelShow: false,
      phoneCode: "",
      // types: {
      //   1: "现金券",
      //   2: "折扣券",
      //   3: "兑换券",
      //   4: "洗车券"
      // }
    };
  },
  components: {
    Qr: Qr,
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    // ...mapState({
    //   // pointInfo: (state) => state.point.pointInfo,
    // }),
    formattedUserType() {
      return this.formatterType(this.userInfo);
    },
    formatterNextUser() {
      return this.formatterNextUserLevel();
    },
  },
  created() {
    console.log(
      "当前页面路由",
      window.location.origin + `/${this.enterpriseId}/fuel`
    );
    if (this.phone) {
      // this.getInfo();
      this.goto();
      this.getUserInfo();
      this.inspectRegisteredUser();
      console.log(this.$store, 11111222);
      this.getFunctionList();
    }
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig",
    }),
    ...mapMutations({
      setUserInfo: "authen/setUserInfo",
    }),
    // 客服咨询
    serviceTelEvent() {
      this.serviceTelShow = true;
      this.getServiceTel();
    },
    // 获取客服咨询电话
    getServiceTel() {
      this.$axios
        .$get("/selectEnterpriseInfo", {
          params: { enterpriseId: this.enterpriseId },
        })
        .then((res) => {
          this.phoneCode = res.data.phone;
        });
    },
    // 拨打电话
    phoneUrlEvent(phoneCode) {
      const phoneUrl = `tel:${phoneCode}`;
      window.location.href = phoneUrl;
    },
    // 油站导航
    goAuthStation() {
      location.href = window.location.origin + `/${this.enterpriseId}/fuel`;
    },
    // 推荐有奖
    goRecommend() {
      location.href =
        window.location.origin + `/${this.enterpriseId}/recommend/recommend`;
    },

    // 会员权益
    goRight() {
      this.$toast({ message: "会员权益暂未开通" });
    },
    // 认证渠道
    goAuthen() {
      this.$router.push({
        path: `/${this.enterpriseId}/authentication`,
      });
      // Toast({ message: "渠道认证暂未开通" });
    },
    // 我的订单
    goAuthOrder() {
      this.$router.push({
        path: `/${this.enterpriseId}/record/myorder`,
      });
    },
    // 格式化用户类型
    formatterType(userInfo) {
      const types = {
        1: "普卡",
        2: "银卡",
        3: "金卡",
        4: "钻卡",
        5: "黑卡",
        s: "超级会员",
      };
      return types[userInfo.gradeCode] || "";
    },

    // 格式化下一个用户等级
    formatterNextUserLevel() {
      const types = {
        1: "普卡",
        2: "银卡",
        3: "金卡",
        4: "钻卡",
        5: "黑卡",
      };
      let code = this.userInfo.nextGradeCode;
      return types[code] || "";
    },

    // 小AI加油跳转
    goAI() {
      const stationId = this.$store.state.authen.userInfo.stationId;
      this.$axios
        .$get("/yunHuaBiz/getYunHuaParams", {
          params: { mobilePhone: this.phone, enterpriseId: stationId },
        })
        .then((res) => {
          console.log(res.data);
          window.location.href = res.data;
        });
    },

    // 初始化进入判断是否注册成功发券
    inspectRegisteredUser() {
      this.$axios
        .$get("/inspectRegisteredUser", {
          params: { enterpriseId: this.enterpriseId, mobilePhone: this.phone },
        })
        .then(async (res) => {
          // 如果完全新用户时：基础值时1 ， 知道领完会员卡之间会进入两次页面，所以会变成 2 ，3. 最后停留在3
          if (res.retCode === 0 && res.data.numberOfEntry === 3) {
            const couponRes = await this.$axios.$get("/getRegisterCoupon", {
              params: {
                enterpriseId: this.enterpriseId,
                mobilePhone: this.phone,
              },
            });
            console.log(couponRes);
            if (couponRes.data && couponRes.data.length >= 1) {
              Dialog.confirm({
                title: "恭喜获得优惠券！",
                message: "优惠券已到账，马上去查看",
                confirmButtonText: "去查看",
                cancelButtonText: "关闭",
              }).then(() => {
                this.$router.push({
                  path: `/${this.enterpriseId}/coupon`,
                });
              });
            }
          }
        });
    },
    // inspectRegisteredUser() {
    //   this.$axios
    //     .$get("/inspectRegisteredUser", {
    //       params: { enterpriseId: this.enterpriseId, mobilePhone: this.phone }
    //     })
    //     .then(async res => {
    //       // alert("numberOfEntry的值----：" + res.data.numberOfEntry);
    //       // 如果完全新用户时：基础值时1 ， 知道领完会员卡之间会进入两次页面，所以会变成 2 ，3. 最后停留在3
    //       if (res.retCode === 0 && res.data.numberOfEntry === 3) {
    //         const couponRes = await this.$axios.$get("/getRegisterCoupon", {
    //           params: {
    //             enterpriseId: this.enterpriseId,
    //             mobilePhone: this.phone
    //           }
    //         });
    //         console.log(couponRes);
    //         let arr = [];
    //         if (couponRes.data && couponRes.data.length >= 1) {
    //           const result = couponRes.data.reduce((pre, cur) => {
    //             var exists = pre.find(
    //               item =>
    //                 item.couponTemplateInfo.couponType ===
    //                 cur.couponTemplateInfo.couponType
    //             );
    //             if (!exists) {
    //               pre.push(cur);
    //             }
    //             return pre;
    //           }, []);
    //           result.forEach(item => {
    //             let num = couponRes.data.filter(
    //               f =>
    //                 f.couponTemplateInfo.couponType ===
    //                 item.couponTemplateInfo.couponType
    //             );
    //             arr.push(
    //               `${item.couponTemplateInfo.couponAmt}元${
    //                 this.types[item.couponTemplateInfo.couponType]
    //               }*${num.length}`
    //             );
    //           });
    //           Dialog.confirm({
    //             title: "恭喜获得优惠券！",
    //             message: arr.join(","),
    //             confirmButtonText: "去查看",
    //             cancelButtonText: "关闭"
    //           }).then(() => {
    //             this.$router.push({
    //               path: `/${this.enterpriseId}/coupon`
    //             });
    //           });
    //         }
    //       }
    //     });
    // },
    goFuelOrRemit() {
      // 获取油站信息列表
      this.$axios
        .$get("/appletSelectStationList", {
          params: { enterpriseId: this.enterpriseId },
        })
        .then((res) => {
          if (res.retCode != 0) {
            throw new Error("获取油站失败");
          }
          const { stationId, stationName } = res.data.stationList[0] || {};
          if (res.data.stationList.length === 1) {
            // this.$router.push({
            //   path: `/${this.enterpriseId}/fuel/remit/?stationId=${stationId}&stationName=${stationName}`
            // });
            location.href =
              window.location.origin +
              `/${this.enterpriseId}/fuel/remit/?stationId=${stationId}&stationName=${stationName}`;
          } else {
            // this.$router.push({
            //   path: `/${this.enterpriseId}/fuel`
            // });
            location.href =
              window.location.origin + `/${this.enterpriseId}/fuel`;
          }
        })
        .catch((err) => {
          alert(err);
        });
    },
    async getUserInfo() {
      try {
        const infoData = await this.$axios.$get("/selectMemberInfo", {
          params: {
            enterpriseId: this.enterpriseId,
            mobilePhone: this.phone,
          },
        });

        if (infoData.retCode !== 0) {
          throw new Error(infoData.message);
        }
        if (!infoData.data) {
          localStorage.clear(); // 清空缓存
          throw new Error("1006,查询不到该用户信息，请重新进入");
          // alert("1003,查询不到该用户信息")
        }
        this.setUserInfo(infoData.data);
        console.log(infoData.data);
      } catch (error) {
        alert(error);
      }
    },
    goto() {
      const that = this;
      this.getSdkConfig({
        jsApiList: ["wx-open-launch-weapp"],
        openTagList: ["wx-open-launch-weapp"],
      }).then((res) => {
        wx.config(res);
        wx.error(function (err) {
          console.log(err);
          that.showGoApplet = false;
        });
      });
    },
    gotoSomePage(url) {
      // localStorage.clear();
      // sessionStorage.clear();
      window.open(url);
    },
    // 获取功能菜单列表
    getFunctionList() {
      this.$axios
        .$post("/gzhFunctionConfig/query", {
          enterpriseId: this.enterpriseId,
        })
        .then((res) => {
          this.functionList = res.data || [];
          console.log(this.functionList, "89898989");
          this.$nextTick(() => {
            this.removeSubItem();
          });
        });
    },
    removeSubItem() {
      // 以下代码演示如何通过JavaScript删除具有特定类名的DOM元素
      const subItem = document.querySelector(".subItem");
      console.log(subItem);
      if (subItem) {
        subItem.parentNode.removeChild(subItem);
      }
    },
    downloadImg() {},
  },
  beforeRouteEnter(to, from, next) {
    // 使用 to 对象获取目标路由的信息
    const versionValue = to.query.version;
    const gradeCode = to.query.gradeCode;
    const recommenderid=to.query.recommenderId||null
    localStorage.setItem('recommenderid',recommenderid)
    if (versionValue && gradeCode) {
      console.log("存在 version 参数，值为:", versionValue);

      // 继续导航，进入指定页面
      next((vm) => {
        vm.$router.replace({
          path: `/${vm.enterpriseId}/joinmember`,
          query: { version: versionValue, gradeCode },
        });
      });
    } else {
      console.log("不存在 version 参数");

      // 继续导航
      next();
    }
  },
  beforeRouteLeave(to, from, next) {
    // 继续导航
    next();
  },
};
</script>

<style lang="scss" scoped>
.my_index {
  width: 100vw;
  box-sizing: border-box;
  // overflow-x: hidden;
  overflow: hidden;
  position: relative;
  .van-popup.van-popup--round.van-popup--bottom {
    display: flex;
    justify-content: space-between;
    background: #f2f2f2;
    .phoneContent {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      // background: #fff;
      .phone {
        font-size: 0.3rem;
        width: 100%;
        height: 1.3rem;
        line-height: 1.3rem;
        text-align: center;
        background: #fff;
      }
      .phoneCode {
        width: 100%;
        text-align: center;
        background: #fff;
        margin-top: 0.06rem;
        height: 1.4rem;
        line-height: 1.4rem;
        font-size: 0.4rem;
        color: #6e93ff;
      }
      .cancel {
        width: 100%;
        position: absolute;
        text-align: center;
        bottom: 0;
        height: 1.3rem;
        line-height: 1.3rem;
        background: #fff;
        font-size: 0.3rem;
      }
    }
  }
  // 积分和优惠券样式

  .vip-center {
    width: 100%;
    position: absolute;
    top: 10vh;
    margin: 0.43rem auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1rem;
    padding: 0 0.35rem;
    box-sizing: border-box;

    .go_remit {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 0.14rem;
      text-align: center;
      align-items: center;
      justify-content: center;
      font-size: 0.25rem;
      height: 100%;

      .text {
        color: #5b5b5b;
        font-size: 0.25rem;
      }
      .amount {
        color: #000;
        margin-bottom: 0.2rem;
        font-size: 0.35rem;
        font-weight: 500;
        b {
          font-weight: 500;
          font-size: 0.35rem;
        }
      }
    }

    .integral_container {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      align-items: center;
      justify-content: center;

      .integral {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5b5b5b;
        font-size: 0.25rem;

        // .van-icon {
        //   color: #fff;
        //   font-size: 0.35rem;
        // }
      }
      .value {
        margin-bottom: 0.2rem;

        font-size: 0.35rem;
        font-weight: 500;
        color: #000;
      }
    }
    .scan_container {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      align-items: center;
      justify-content: center;

      .scan {
        width: 0.35rem;
        height: 0.35rem;
        background: url("../../static/my/cord.png") no-repeat 0 0;
        background-size: 100% 100%;
        margin-bottom: 0.2rem;
      }
      .text {
        color: #5b5b5b;
        font-size: 0.25rem;
      }
    }
  }

  .pop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ccc;
    opacity: 0.3;
    z-index: 999;

    .spinner {
      margin: 40vh auto 0;
      width: 70px;
      text-align: center;
    }

    .spinner > div {
      width: 18px;
      height: 18px;
      background-color: black;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes sk-bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes sk-bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
  }

  .bacggroud_wraper {
    position: absolute;
    box-sizing: border-box;
    background: url("../../static/my/background.png") no-repeat 0 0;
    background-size: 100% 100%;
    width: 100%;
    top: 0;
    height: 42vh;
    padding: 0.35rem;

    background-color: #e9e9e9;
    z-index: -2;
    > .con {
      display: flex;
      position: relative;

      .header {
        margin-right: 0.4rem;

        .avatar {
          width: 1rem;
          height: 1rem;
          border-radius: 50%;

          > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          > .userAvatar {
            background: url("../../static/my/user.png") no-repeat 0 0;
            background-size: 100% 100%;
            width: 1.2rem;
            height: 1.2rem;
            // border: 1px dashed #999 ;
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .station {
          margin-top: 0.1rem;
          font-weight: 500;
          font-size: 0.35rem;
          color: #000;

          .icon {
            // background: url("../../static/vip/vipicon.png") no-repeat 0 0;
            background-size: 100% 100%;
            display: inline-block;
            width: 0.25rem;
            height: 0.25rem;
          }
        }

        .right_up {
          display: flex;
          align-items: baseline;

          .grade {
            height: 0.29rem;
            margin: 0.12rem 0;
            font-size: 0.24rem;
            // color: #d9a85a;
            // background: #1e201f;
            img {
              width: 0.6rem;
              margin-left: 0.06rem;
            }
          }
        }
        .right_down {
          font-size: 0.25rem;
          color: #999999;
        }
      }
    }
  }

  // 头部卡片开始
  .top {
    margin-top: calc(34vh - 12vh);
    padding: 0 0.35rem;
    width: 100%;

    .vip {
      width: 100%;
      height: 12.9vh;
      padding: 0 0.3rem;
      box-sizing: border-box;
      // background-color: #bf1a1a;
      border-radius: 0.3rem;
      position: absolute;
      position: relative;
      margin: auto;
      overflow: hidden;
      z-index: -1;
      display: flex;
      align-items: center;
      img {
        z-index: -2;
        position: absolute;
        width: 100%;
        height: 100%;
        left: -0.35rem;
        padding-right: 0.35rem;
        box-sizing: border-box;
      }
    }
    .vip2 {
      width: 100%;
      height: 12.9vh;
      padding: 0 0.3rem;
      box-sizing: border-box;
      // background-color: #bf1a1a;
      border-radius: 0.3rem;
      position: absolute;
      left: -0.35rem;
      position: relative;
      margin: auto;
      overflow: hidden;
      z-index: -1;
      display: flex;
      align-items: center;
      .growth {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .wrapper {
          box-sizing: border-box;
          padding-bottom: 0.1rem;
          .icon {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            background: url("../../static/my/vip.png") no-repeat 0 0;
            background-size: 100% 100%;
            color: #fff;
            margin-right: 0.3rem;
          }
          .text1 {
            font-size: 0.28rem;
            color: #fff;
          }
        }

        .text2 {
          font-size: 0.2rem;
          color: #fff;
        }
      }
      .rights {
        position: relative;
        z-index: 1; /* 指定元素在 z 轴上的顺序，使其在顶层 */
        width: 1.8rem;
        height: 0.6rem;
        text-align: center;
        line-height: 0.6rem;
        background: linear-gradient(97deg, #f4e9bf, #f1d99f);
        font-size: 0.2rem;
        color: #000;
        border-radius: 23px;
      }
    }
  }

  // 各板块入口
  .bottom {
    width: 100%;
    // min-height: calc(100vh - 2.3rem);
    box-sizing: border-box;
    background-color: #fff;
    padding: 0.1rem 0.35rem 0rem 0.35rem;
    margin-top: -2vh;

    > .cont {
      margin: 0 auto;
      margin-top: 0.4rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;

      .item {
        width: 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 0.65rem;
        margin-bottom: 0.64rem;
        div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .icon {
          width: 0.8rem;
          height: 0.8rem;
          background-color: rgba(240, 210, 153, 100);
          background-size: 100% 100%;
          margin-bottom: 0.36rem;
          // border: 1px dashed #ddd;
        }

        .text {
          height: 0.32rem;
          color: #333;
          font-size: 0.26rem;
          text-align: center;
        }

        &:nth-child(4n) {
          margin-right: 0px;
        }
      }
      // .subItem{
      //   overflow: hidden;
      // }

      .item {
        .vip {
          background: url("../../static/my/vipCard.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .charge {
          background: url("../../static/my/order.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .car {
          background: url("../../static/my/car.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .recommend {
          background: url("../../static/my/recommand.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .svip {
          background: url("../../static/my/super.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .consume {
          background: url("../../static/my/coupon.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .pay {
          background: url("../../static/my/setting.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .fuel {
          background: url("../../static/my/map.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .remit {
          background: url("../../static/my/oilPrice.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .authen {
          background: url("../../static/my/authen.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .AI {
          background: url("../../static/fuel/new/AI.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .miaosha {
          background: url("../../static/my/miaosha.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .teamcard {
          background: url("../../static/my/carTeam.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .fueling {
          background: url("../../static/my/fueling.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

      .item {
        .serviceTel {
          background: url("../../static/my/serviceTel.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
    }
  }

  .goApplet {
    margin: 0 auto;
    margin-top: 1rem;
    width: 6rem;
    height: 0.8rem;
    // background: linear-gradient(-67deg, #fdb816, #fb8b0a);
    border-radius: 0.4rem;
    text-align: center;
    font-size: 0.4rem;
    color: #ff4445;
    line-height: 0.8rem;
    border: 1px solid #ff4445;
    font-weight: bold;
  }

  .scan_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 6rem;
      padding: 0.5rem 1rem 0.7rem 1rem;
      box-sizing: border-box;
      border-radius: 0.3rem;
      background-color: #fff;

      .title {
        font-size: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-bottom: 0.3rem;
        font-weight: bold;
      }

      .qr {
        width: 100%;
      }
    }
  }
}
</style>
